<template>
  <div
    name="list"
    tag="div"
    class="data-v-dp"
    :class="{ type2: type == 2 }"
  >
    <div
      v-for="(numItem, index) in nums"
      :key="index"
      :class="numItem.className"
      class="num"
    >
      <img :src="getSrc(numItem.val)" :alt="numItem.val" />
    </div>
  </div>
</template>
<script>
import zrender from "zrender";
import { modifyOpacity } from "../color";

// import { randomBetween } from "../utils";
// let colors = ["#117583", "#603A2D", "#132A58"];

export default {
  name: "data-v-digit-paging",
  props: {
    type: {
      type: [Number, String],
      default: 1
    },
    num: {
      type: [Number, String],
      default: 0
    },
    /* 长度是否固定 */
    fixed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    nums() {
      let str = this.format(this.num);
      return Array.from(str).map(s => ({
        val: s,
        className: s === "," ? "split" : null
      }));
    }
  },
  mounted() {
    console.log(this.nums);
  },
  methods: {
    createGradient(color) {
      let gradient = new zrender.RadialGradient(0.5, 0.5, 0.5, [
        { offset: 0, color: modifyOpacity(color, 1) },
        { offset: 1, color: modifyOpacity(color, 0.5) }
      ]);
      return gradient;
    },
    format(val) {
      if (this.fixed) {
        val = String(val).padStart(9, "0");
      }
      return String(val).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    },
    getSrc(num) {
      let fileName = num == "," ? "split" : num;
      if (this.type == 1) {
        return require(`./img/${fileName}.png`);
      } else if (this.type == 2) {
        return require(`./img2/${fileName}.png`);
      }
    }
  }
};
</script>

<style lang="less">
.data-v-dp {
  height: 100%;
  display: flex;
  &.type2 {
    .num {
      width: 36px;
      height: 48px;
    }
  }
  .num {
    width: 36px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    & + .num {
      margin-left: 5px;
    }
    &.split {
      width: 20px;
      align-items: flex-end;
      padding-bottom: 10px;
    }
  }
}
</style>
